// 注册框框
<template>
    <div id='register-box-container'>
        <h2>创建账户</h2>
        <div class="login-signed">
            已拥有账号? <span @click="$emit('on-click')">马上登录!</span>
        </div>
        <Divider />
        电子邮箱
        <Input class="login-text" size="large" placeholder="请输入您的电子邮箱" v-model="email" @on-blur="checkEmail"/>
        <div class="login-tips"  v-for="(item, index) in emailCheck"  :key="`email-tip-${index}`">
            {{ item }}
        </div>
        设置密码
        <Input class="login-text" size="large" placeholder="请设置登录密码" v-model="passwd" @on-blur="checkPasswd" type="password" />
        <div class="login-tips" v-for="(item, index) in passwdCheck" :key="`passwd-tip-${index}`">
            {{ item }}
        </div>
        确认密码
        <Input class="login-text" size="large" placeholder="再次确认密码" v-model="passwd2" @on-blur="checkPasswd2" type="password"/>
        <div class="login-tips" v-for="(item, index) in passwd2Check" :key="`passwd2-tip-${index}`">
            {{ item }}
        </div>
        验证码 <br>
        <Input class="login-text" size="large" style="width: 245px" placeholder="请输入验证码" v-model="token" @on-blur="checkToken"/>
        <Button type="primary" style="margin-left: 20px; width: 130px" @click="getToken" :disabled="tokenCount > 0">
            获取验证码 {{ tokenCount > 0 ? `(${tokenCount})` : '' }}
        </Button>
        <div class="login-tips"  v-for="(item, index) in tokenCheck"  :key="`token-tip-${index}`">
            {{ item }}
        </div>
        <CheckBox v-model="single">
            已阅读 <span style="color: #57A3F3">《服务条款》</span>
        </CheckBox>
        <div class="login-submit">
            <Button type="primary" shape="circle" size="large" @click="doRegister()" :disabled="canRegister()">
                创建并登录
            </Button>
        </div>
    </div>
</template>

<script lang='ts'>
import { RegisterBox } from "./Index";
export default RegisterBox;
</script>

<style lang='scss' scoped>
@import './Index.scss'
</style>